<script setup lang='ts'>
// computed： 在组合式API 中使用计算属性的方法，可以创建只能获取值的计算属性
// 也可以配置为对象实现可写计算属性
import { ref, computed } from "vue";
import type {Ref} from 'vue'

let price:Ref<number> = ref(100)

// 使用计算属性的时候需要传递一个函数，当前计算属性是只读的，只能获取值，无法进行修改
let priceVip = computed(()=>{
    return price.value * 0.5
})

// 如果需要可写的计算属性
let priceSVip = computed({
    get(){
        return price.value * 0.3
    },
    set(newValue){
        price.value = newValue / 0.3
    }
})

function changePrice() {
    // price.value = 1000

    // 修改计算属性的值，修改值的时候需要像 ref 一样加上 .value
    priceSVip.value = 300
}
</script>
<template>
    <div>
        <button @click='changePrice'>修改价格</button>
        <p>原价：{{price}} </p>
        <p>计算属性折扣价： {{priceVip}} </p>
        <p>可写计算属性折扣价： {{priceSVip}} </p>
    </div>
</template>
<style>
    
</style>